<template>
  <div class="table">
    <div class="table-card">
      <div class="table-card-header">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="header-left">
              <i class="dbm d-icon-3501shuju"></i>
              {{table.tableName}} &nbsp;&nbsp;
              <el-tooltip content="导出表格数据" effect="light">
                <a @click.prevent="exportData">
                  <i class="dbm d-icon-download"></i>
                </a>
              </el-tooltip>&nbsp;&nbsp;
              <el-tooltip content="插入一条数据" effect="light">
                <a @click.prevent="insert">
                  <i class="dbm d-icon-27CIRCLE"></i>
                </a>
              </el-tooltip>&nbsp;&nbsp;
              <el-popover trigger="hover" width="100">
                <div v-for="(item,index) in columns" :key="index">
                  <el-checkbox
                    v-if="item.visiable !== undefined"
                    v-model="item.visiable"
                    :disabled="item.visiable == true && visiableCount <= 1"
                    :label="item.field"
                  ></el-checkbox>
                </div>
                <i slot="reference" class="dbm d-icon-icon_seelog_fill"></i>
              </el-popover>&nbsp;&nbsp;
              <el-tooltip :content="isOpenFilter?'关闭筛选':'开启筛选'" effect="light">
                <a @click.prevent="openFilter">
                  <i class="dbm d-icon-filter" :style="{color:isOpenFilter?'#6b6b6b':'#008b8b'}"></i>
                </a>
              </el-tooltip>&nbsp;&nbsp;
              <el-tooltip content="重新加载数据" effect="light">
                <a @click.prevent="refreshData">
                  <i class="dbm d-icon-8"></i>
                </a>
              </el-tooltip>
            </div>
          </el-col>
          <el-col :span="16">
            <!-- 分页 -->
            <div class="header-right">
              <Page :total="100" size="small" show-sizer></Page>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="table-card-content">
        <i-table highlight-row style="width:100%;" :columns="columns" :data="data1" border></i-table>
      </div>
    </div>
    <files-preview></files-preview>
  </div>
</template>

<script>
import filesPreview from "@/components/business/files-preview.vue";
export default {
  components: { filesPreview },
  props: {},
  data() {
    return {
      isLoading: true,
      isOpenFilter: false,
      table: {
        tableName: "",
        dataCount: 0
      },
      columns: [
        {
          type: "index",
          width: 60,
          align: "center"
        },
        {
          title: "姓名",
          key: "name"
        },
        {
          title: "年龄",
          key: "age"
        },
        {
          title: "地址",
          key: "address"
        },
        {
          title: "商品图片",
          key: "commodityPhoto",
          align: "center",
          render: (h, params) => {
            return h("img", {
              style: {
                //设置样式
                width: "50px",
                height: "40px",
                "border-radius": "5%"
              },
              attrs: {
                //设置属性
                src: "http://localhost:8888/" + params.row.commodityPhoto
              }
            });
          }
        }
      ],
      data1: [
        {
          name: "王小明",
          age: 18,
          address: "北京市朝阳区芍药居"
        },
        {
          name: "张小刚",
          age: 25,
          address: "北京市海淀区西二旗"
        },
        {
          name: "李小红",
          age: 30,
          address: "上海市浦东新区世纪大道"
        },
        {
          name: "周小伟",
          age: 26,
          address: "深圳市南山区深南大道"
        }
      ]
    };
  },
  watch: {},
  computed: {},
  methods: {
    cellClickDone(rowIndex, rowData, field) {
      this.cellClickData = {
        index: rowIndex,
        field: field
      };
    }
  },
  created() {
    let table = {
      tableName: "公司信息表"
    };
    this.table = table;
  },
  mounted() {}
};
</script>
<style lang="less" scoped>
.table {
  height: 100%;
  .table-card {
    padding: 16px;
    height: 100%;
    border-radius: 5px;
    border-color: #b0b0b0;
    background-color: #fff;
    .table-card-header {
      position: relative;
      top: 0;
      width: 95%;
      .header-left {
        float: left;
        margin-left: 16px;
        i {
          color: #008b8b;
          font-size: 18px;
          cursor: pointer;
        }
      }
      .header-right {
        float: right;
        margin-right: 6px;
      }
    }
    .table-card-content {
      box-sizing: content-box;
      padding: 10px 0 0;
      font-size: 15px;
    }
  }
}
</style>